<!--
 * @Author: hyq
 * @LastEditors: hyq
 * @Description: 
 * @Date: 2023-12-14 13:51:32
-->
<template>
  <view
    class="radio"
    :class="{ isPrivate: props.isPrivate === true }"
    @click="onChange"
  >
    <image
      v-if="checked"
      class="radio_icon"
      src="/static/confirm-radio-icon.png"
      mode="scaleToFill"
    />
    <image
      v-else
      class="radio_icon"
      src="/static/unconfirm-radio-icon.png"
      mode="scaleToFill"
    />
    <slot></slot>
  </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{ modelValue: boolean; isPrivate?: boolean }>(),
  {
    modelValue: false,
    isPrivate: false
  }
)

const checked = ref(props.modelValue)

const emit = defineEmits(['update:modelValue', 'change'])
function onChange() {
  checked.value = !checked.value

  emit('update:modelValue', checked.value)
  emit('change', checked.value)
}
</script>
<style scoped lang="scss">
.radio {
  display: flex;
  height: 40rpx;
  line-height: 40rpx;
  align-items: center;
  &_icon {
    width: 32rpx;
    height: 32rpx;
    border-radius: 32rpx;
    vertical-align: middle;
    margin-right: 10rpx;
    margin-left: 10rpx;
  }
}
.isPrivate {
  .radio_icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 0;
  }
}
</style>
